<template>
	<view id='magazine-box'>
		<view id='magazine'
			v-on:swipeleft="touchl" v-on:swiperight="touchr" 
			@mousedown="pcmousedown" @mouseup="pcmouseup"
		>
			<slot></slot>
		</view>
	</view>
</template>
<script>
	import {
		magazineInit,
		touchLeft,
		touchRight,
		getPageNumber,
		apppx
	} from './common/magazine.js';

	export default {
		data() {
			return {
				page: 1,
				timer: null,
				mDown: 0,
				mUp: 0,
			}
		},
		mounted() {
			const px = apppx();
			px > 750 ? magazineInit('#magazine', '#magazine-box') : magazineInit('#magazine');
			this.timer = setInterval(() => {
				this.page = getPageNumber('#magazine');
				this.$emit('dynamicPageNumber', this.page);
			}, 200)
		},
		destroyed() {
			this.timer = null;
		},
		methods: {
			touchl() {
				touchLeft('#magazine');
			},
			touchr() {
				touchRight('#magazine');
			},
			pcmousedown(event) {
				this.mDown = event.clientX;
			},
			pcmouseup(event) {
				this.mUp = event.clientX;
				if ((this.mDown - this.mUp) > 70) {
					touchLeft('#magazine');
				}
				if ((this.mUp - this.mDown) > 70) {
					touchRight('#magazine');
				}
			}
		}
	}
</script>

<style scoped>
	/* #magazine-box{
		width: 80vw;
		height: 80vh;
		margin-left: 10vw;
		margin-top: 10vh;
	} */
</style>
